<template>
  <el-dialog
    class="subject"
    :visible.sync="dialogFormVisible"
    center
    width="600px"
  >
    <div class="title" slot="title">
      {{ mode === 'add' ? '新增学科' : '编辑学科' }}
    </div>
    <el-form
      ref="subjectFormRef"
      :model="subjectForm"
      :rules="subjectRules"
      label-width="100px"
    >
      <el-form-item label="学科编号" prop="rid">
        <el-input v-model="subjectForm.rid"></el-input>
      </el-form-item>
      <el-form-item label="学科名称" prop="name">
        <el-input v-model="subjectForm.name"></el-input>
      </el-form-item>
      <el-form-item label="学科简称">
        <el-input v-model="subjectForm.short_name"></el-input>
      </el-form-item>
      <el-form-item label="学科简介">
        <el-input v-model="subjectForm.intro"></el-input>
      </el-form-item>
      <el-form-item label="学科备注">
        <el-input v-model="subjectForm.remark"></el-input>
      </el-form-item>
    </el-form>
    <div slot="footer" class="dialog-footer">
      <el-button @click="dialogFormVisible = false">取 消</el-button>
      <el-button type="primary" @click="submit">确 定</el-button>
    </div>
  </el-dialog>
</template>

<script lang="ts">
import { Vue, Component, Prop, Watch } from 'vue-property-decorator'
import { addSubject, updateSubject } from '@/api/subject'
@Component({})
export default class SubjectEdit extends Vue {
  declare subjectForm: any
  declare dialogFormVisible: boolean

  @Prop({ default: 'add', type: String }) mode?: string
  @Watch('dialogFormVisible')
  dialogFormVisibleChange() {
    this.$refs.subjectFormRef &&
      (this.$refs.subjectFormRef as any).clearValidate()
  }
  data() {
    return {
      dialogFormVisible: false, // 控制Dialog的显示或是隐藏
      subjectForm: {
        rid: '', // 学科编号
        name: '', // 学科名称
        short_name: '', // 学科简称
        intro: '', // 学科简介
        remark: '' // 备注
      },
      subjectRules: {
        rid: [{ required: true, message: '请输入学科编号', trigger: 'blur' }],
        name: [{ required: true, message: '请输入学科名称', trigger: 'blur' }]
      }
    }
  }
  submit() {
    ;(this.$refs.subjectFormRef as any).validate(async (valid: boolean) => {
      if (valid) {
        let res = null
        if (this.mode === 'add') {
          // 新增
          res = await addSubject(this.subjectForm)
        } else {
          // 编辑
          res = await updateSubject(this.subjectForm)
        }

        if (res.data.code === 200) {
          if (this.mode === 'add') {
            this.$message({
              type: 'success',
              message: '新增成功~'
            })
          } else {
            this.$message({
              type: 'success',
              message: '编辑成功~'
            })
          }

          // 关闭当前模态框
          this.dialogFormVisible = false

          // 子组件传值给父组件
          this.$emit('subjectSuccess')
        } else {
          this.$message.error(res.data.message)
        }
      }
    })
  }
}
</script>

<style lang="scss" scoped>
.subject /deep/ {
  .el-dialog__header {
    padding: 0;
  }
  .title {
    text-align: center;
    color: #fff;
    background-color: #0e9ff9;
    height: 53px;
    line-height: 53px;
  }
  .el-dialog__headerbtn .el-dialog__close {
    color: #fff;
  }
}
</style>
